
<template>
  <div v-loading="tableLoading" class="dashboard-container">
  <!--子组件位置-->
  <!--自定义table-data,table-label,table-operation三个属性，分别传递我们需要的数据-->
  <!--自定义@propClick方法，用来接收子组件的通知并执行定义的btnClick方法-->
    <myTable
     :table-data="tableData" 
     :table-label="tableLabel"
     :table-operation="tableOperation"
      @propClick="btnClick" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// 根据table组件引入到父组件里
import myTable from '@/components/fengzhuang/biaodian.vue'
export default {
  name: 'Dashboard',
  // 并在父组件的compoments里边注册
  components: {
    myTable
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  // eslint-disable-next-line vue/order-in-components
  data() {
    return {
      tableLoading: true,
      // 子组件的表格数据
      tableData: [
        { id: 1, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 2, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 3, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 4, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 5, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 6, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 7, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 8, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 9, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 10, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 11, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 12, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }
      ],
      // 子组件的表头数据
      tableLabel: [
        { label: 'ID', width: '40', prop: 'id' },
        { label: '日期', width: '', prop: 'date' },
        { label: '销售量', width: '', prop: 'sales' },
        { label: '销售额', width: '', prop: 'sale' },
        { label: '成本', width: '', prop: 'const' },
        { label: '利润', width: '', prop: 'profit' }
      ],
      // 子组件的操作按钮
      tableOperation: [
        { label: '编辑', fun: 'edit', type: 'primary' },
        { label: '查看', fun: 'look', type: 'success' },
        { label: '删除', fun: 'delete', type: 'danger' },
        { label: '导出', fun: 'export', type: 'warning' }
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      this.tableLoading = false
      this.$message.success('数据加载成功')
    }, 1000)
  },
  methods: {
    // 当父组件接收到了子组件this.$emit的通知后就会执行这个方法来接收子组件点击传递过来的数据
    btnClick(fun, row) {
      if (fun === 'edit') {
        console.log('子组件点击了编辑,父组件收到子组件传递的数据', row)
      } else if (fun === 'look') {
        console.log('子组件点击了查看,父组件收到子组件传递的数据', row)
      } else if (fun === 'del') {
        console.log('子组件点击了删除,父组件收到子组件传递的数据', row)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    /*width: 100%;*/
    margin: 30px;
    height: 88vh;
  }
  &-text {
    font-size: 40px;
    line-height: 46px;
  }
}
</style>
